A clickable recreation of surfaceagency.com.au, built from surface-website/ (Eleventy source: index.njk, _layouts/base.njk, css/surface.css).
Screens
| File | What it recreates |
|---|---|
HomeScreen.jsx |
The full homepage: hero, philosophy, stats, services, data-first split, results ledger, method, engine, proof, promise, FAQ, contact form |
ServiceScreen.jsx |
A service page: framed-tablet hero, accented accordion split, closing CTA |
CaseStudiesScreen.jsx |
Case-study listing with staggered screenshot rows and masked client logos |
InsightScreen.jsx |
An Insights article: split hero, key takeaways, body typography, inline CTA, related rows |
Interactions: top-right screen switcher; clicking a service card opens that service page; the enquiry form submits to a thank-you state; the guarantee banner opens the Performance Guarantee modal; the trust toast dismisses.
Not recreated (JS-driven on the live site, out of scope here): GSAP scroll reveals and the parallax footer, the testimonial swiper's drag behaviour, the preloader, the exit-intent popup, the two-step form loader, and the fixed page-edge frame (disabled on the live site too).